<template>
  <div class="page reject-openPay">
    <div class="scroll-view">
      <customHeader middleTitle="驳回原因" @leftCallBack="handleBack"></customHeader>
      <div class="page-body">
        <div class="check-group">
          <div class="checkbox"
               v-for="(item,index) in reason"
               :key="index">
            <i :class="item.isChecked?'zhk-ty':'zhk-wxz'"
               @click="item.isChecked = !item.isChecked" />
            <label @click="item.isChecked = !item.isChecked">{{item.text}}</label>
            <div v-if="item.isChecked&&item.isOtherReason"
                 class="other-reason">
              <textarea class="reason-input"
                        maxlength="100"
                        v-model="item.otherReason"
                        placeholder="最多100字"></textarea>
              <span class="tip">{{100-item.otherReason.length+'/100'}}</span>
            </div>
          </div>
        </div>
        <div class="btn-wrap">
          <div class="btn"
               @click="submit">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge";
import { Toast, MessageBox } from "mint-ui";
export default {
  name: "reasonOpenPay",
  data() {
    return {
      data: {},
      hadDone:false,
      backTimeId:null,
      reason: [
        {
          isChecked: false,
          isOtherReason: false,
          text: "银行卡错误"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "身份证信息错误"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "营业执照信息错误"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "费率有异议"
        },
        {
          isChecked: false,
          isOtherReason: true,
          text: "其他信息错误",
          otherReason: ""
        }
      ]
    };
  },
  methods: {
    handleBack(){
       MessageBox.close(false);
      if(this.hadDone){
        this.$router.go(-2);
      }else{
        this.$router.go(-1);
      }
    },
    submit() {
      let reason = [];
      for (let i = 0; i < this.reason.length; i++) {
        if (this.reason[i].isChecked) {
          if (this.reason[i].isOtherReason) {
            if (this.reason[i].otherReason.length == 0) {
              Toast("请输入驳回原因");
              return;
            } else {
              reason.push(this.reason[i].otherReason);
            }
          } else {
            reason.push(this.reason[i].text);
          }
        }
      }
      if(reason.length===0){
         Toast("请选择驳回原因");
         return;
      }

      let param = {
        msgId: this.data.msgId,
        msgStatus: 2,
        rejectReasonList: reason,
        msgTitleType: this.data.msgTitleType,
        openId: this.data.openId
      };
      if(this.$route.query.shopId){
        param.shopId=this.$route.query.shopId;
      }
      this.ajax({
        url: "/newapp/AppMsg/updateMsgState.do",
        type: "post",
        data: param,
        controlLoading: true
      })
        .then(res => {
          jsBridge.updateNativePage({ page: "newsPage" });
          if (res.success) {
            this.hadDone = true;
            if (res.code == 9) {
              MessageBox({
                title: "提示",
                message: res.msg,
                showCancelButton: false,
                confirmButtonText: "知道了",
                closeOnClickModal: false
              }).then(action => {
                this.$router.go(-2);
              });
            } else {
              Toast("操作成功");
              this.backTimeId = setTimeout(() => {
                this.backTimeId = null;
                this.$router.go(-2);
              }, 0);
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    }
  },
  created() {
    this.data = this.$route.query;
    if(this.data.msgTitleType==2){//返现营销的驳回原因
      this.reason= [
        {
          isChecked: false,
          isOtherReason: false,
          text: "不想参加了"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "营销服务费有异议"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "软件服务费有异议"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "用户津贴有异议"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "合作协议有异议"
        },
        {
          isChecked: false,
          isOtherReason: false,
          text: "活动时间有异议"
        },
        {
          isChecked: false,
          isOtherReason: true,
          text: "其他",
          otherReason: ""
        }
      ];
    }
  },
  destroyed() {
    if(this.backTimeId){
      clearTimeout(this.backTimeId);
    }
  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "NotificationCenter";
</style>
